<template>
  <div class="test-list">
    <AppHeader title="错题本" @leftClickEvent="handleHeaderLeft()" />
    <Mescroll v-bind="mescrollConfig" class="research-dev-demand-pool__scroll-container" :style="{
      height: 'calc(100vh - 44px)',
      position: 'fixed',
      top: '44px',
      bottom: 0,
    }" @init="mescrollInited" v-show="testList.length">
      <test-item v-for="item in testList" :item="item" :key="item.id" style="margin-top: 10px"
        @click="handItem(item)" />
    </Mescroll>
  </div>
  <AppLoading v-if="loading.page" />
  <test-enter-popup v-model:show="showEnterPopup" @close="showEnterPopup = false" @clickAgain="handleAgain()"
    @clickDetail="handleDetail()" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick } from "vue";
import { useRouter } from "vue-router";
import { request } from "@/api/request.js";
import wrongApi from "@/api/wrong.js";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
import TestItem from "./components/TestItem.vue";
import TestEnterPopup from "./components/TestEnterPopup.vue";
import Mescroll from "mescroll.js/mescroll.vue";
import { showToast } from "vant";

const router = useRouter();
const state = reactive({
  loading: {
    page: false,
  },
  testList: [],
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 4,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
  curClickItem: {},
  showEnterPopup: false,
});
onMounted(() => {
  state.loading.page = true;
});
const mescrollInited = (mescroll) => {
  state.mescrollInstance = mescroll;
};
const fetchListData = ({ num, size = 20 }) => {
  request(wrongApi.getWrongTestList, {
    data: { page: num, pageSize: size },
  })
    .then((res) => {
      const { code, data } = res;
      if (+code === 1 && data) {
        const isNestPage = data.length < size;
        if (num === 1) {
          state.testList = data;
        } else {
          state.testList = state.testList.concat(data);
        }
        state.testList = state.testList.map((item) => ({
          ...item,
          showMoreInfo: false,
        }));
        nextTick(() => {
          state.mescrollInstance.endSuccess(state.testList.length, !isNestPage);
        });
      } else {
        throw res;
      }
    })
    .catch((e) => {
      showToast(e.msg || (e.body && e.body.msg));
    })
    .finally(() => {
      state.loading.page = false;
    });
};
const handItem = (item) => {
  state.showEnterPopup = true;
  state.curClickItem = item;
};
const handleAgain = () => {
  const {id, title} =  state.curClickItem;
  router.push({
    path: "/wrongBook/correction",
    query: { testId: id, title },
  });
};
const handleDetail = () => {
  const { id, title } = state.curClickItem;
  router.push({
    path: "/wrongBook/scoringDetail",
    query: { testId: id, title },
  });
};

const handleHeaderLeft = () => {
  router.go(-1);
};

const { loading, testList, mescrollConfig, showEnterPopup } = toRefs(state);
</script>
<style scoped lang="scss">
.test-list {
  font-family: PingFangSC, PingFang SC;
  background: #f5f5f5;
  height: 100%;

  .list {
    padding: 0 10px;
    padding-bottom: 80px;
  }
}

.pencil-loading {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1000;

  img {
    height: auto;
    width: 35px;
    margin-bottom: 20px;
  }
}
</style>
